<!-- 使用 type="home" 属性设置首页，其他页面不需要设置，默认为page -->
<route lang="jsonc" type="home">
{
  "layout": "tabbar",
  "style": {
    // 'custom' 表示开启自定义导航栏，默认 'default'
    // "navigationStyle": "custom",
    "navigationBarTitleText": "首页"
  }
}
</route>

<script lang="ts" setup>
import HomeContent from './HomeContent.vue'
import investor from './investor.vue'

defineOptions({
  name: 'Home',
})

// 组件引用
const homeContentRef = ref()
const investorRef = ref()

// 控制组件显示的条件
const roleId = ref(null)

// 根据角色调用相应组件的activated方法
function callComponentActivated() {
  if (roleId.value == 100) {
    // 调用HomeContent组件的activated方法
    homeContentRef.value?.actived()
  }
  else {
    // 调用investor组件的activated方法
    investorRef.value?.actived()
  }
}

onShow(() => {
  if (uni.getStorageSync('user')) {
    roleId.value = JSON.parse(uni.getStorageSync('user')).userInfo.role
  }
  // 页面显示时根据角色调用相应组件的activated方法
  nextTick(() => {
    callComponentActivated()
  })
})
</script>

<template>
  <view>
    <!-- 使用v-show替代v-if，确保组件始终被渲染 -->
    <HomeContent v-show="roleId == 100" ref="homeContentRef" />
    <investor v-show="roleId != 100" ref="investorRef" />
    <!-- tabbar占位高度 -->
    <view class="tabbar-placeholder" />
  </view>
</template>

<style>
page {
  background-color: #f6f6f6;
}
</style>

<style scoped lang="scss">
// tabbar占位高度
.tabbar-placeholder {
  height: 100rpx;
  width: 100%;
}
</style>
